<template>
  <div style="margin-top: 50px">
    <el-form ref="productAttrForm" :model="value" label-width="150px" style="width: 720px" size="small">
      <el-form-item label="物流类型：">
        <el-select v-model="value.deliveryType" style="width: 100%" filterable clearable placeholder="请选择品牌">
          <el-option v-for="option in options.deliveryTypeOptions" :key="option.dictValueCode" :label="option.dictValueName" :value="option.dictValueCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="备货状态：">
        <el-select v-model="value.stockStatus" style="width: 100%" filterable clearable placeholder="请选择备货状态">
          <el-option v-for="option in options.stockStatusOptions" :key="option.dictValueCode" :label="option.dictValueName" :value="option.dictValueCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="销售状态：">
        <el-select v-model="value.salesStatus" style="width: 100%" filterable clearable placeholder="请选择销售状态">
          <el-option v-for="option in options.salesStatusOptions" :key="option.dictValueCode" :label="option.dictValueName" :value="option.dictValueCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="售后服务：">
        <el-checkbox-group v-model="checkedSaleService">
          <el-checkbox v-for="option in options.saleServiceOptions" :key="option.dictValueCode" :label="option.dictValueCode">{{ option.dictValueName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="商品相册：">
        <multi-upload v-model="uploadedGoodsImages" />
      </el-form-item>
      <el-form-item label="商品介绍：">
        <el-input v-model="value.introduction" type="textarea" placeholder="请输入商品介绍" />
      </el-form-item>
      <el-form-item label="商品详情：">
        <el-tabs v-model="activeHtmlName" type="card">
          <el-tab-pane label="电脑端详情" name="pc">
            <tinymce v-model="value.detailHtml" :width="572" :height="300" />
          </el-tab-pane>
          <el-tab-pane label="移动端详情" name="mobile">
            <tinymce v-model="value.detailMobileHtml" :width="572" :height="300" />
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MultiUpload from '@/components/Upload/MultiUpload'
import Tinymce from '@/components/Tinymce'
import DictValueApi from '@/api/system/DictValueApi'

export default {
  name: 'SpuAttr',
  components: {
    MultiUpload,
    Tinymce
  },
  props: {
    value: {
      type: Object,
      default: function() {
        return {}
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: {
        specParamTemplateOptions: [],
        specOptions: [],
        paramOptions: [],
        saleServiceOptions: [],
        deliveryTypeOptions: [],
        stockStatusOptions: [],
        salesStatusOptions: []
      },
      // 编辑模式时是否初始化成功
      hasEditCreated: false,
      // 商品富文本详情激活类型
      activeHtmlName: 'mobile'
    }
  },
  computed: {
    // 商品的编号
    productId() {
      return this.value.id
    },
    // 上传的商品的主图和画册图片
    uploadedGoodsImages: {
      get: function() {
        const images = []
        if (!this.value.image) {
          return images
        }
        images.push(this.value.image)
        if (!this.value.images) {
          return images
        }
        images.push(...this.value.images.split(','))
        return images
      },
      set: function(newValue) {
        debugger
        if (newValue && newValue.length > 0) {
          this.value.image = newValue[0]
          this.value.images = ''
          // 图片组不包含第一张
          if (newValue.length > 1) {
            for (let i = 1; i < newValue.length; i++) {
              this.value.images += newValue[i]
              if (i !== newValue.length - 1) {
                this.value.images += ','
              }
            }
          } else {
            this.value.images = ''
          }
        } else {
          this.value.image = ''
          this.value.images = ''
        }
      }
    },
    // 选中的服务保证
    checkedSaleService: {
      get() {
        if (!this.value.saleService) {
          return []
        }
        return this.value.saleService.split(',')
      },
      set(newValue) {
        if (newValue && newValue.length > 0) {
          this.value.saleService = newValue.join(',')
        } else {
          this.value.saleService = ''
        }
      }
    }
  },
  watch: {
    productId(newValue) {
      if (!this.isEdit) return
      if (this.hasEditCreated) return
      if (newValue === undefined || newValue == null || newValue === 0) return
    }
  },
  created() {
    this.loadOptions()
  },
  methods: {
    loadOptions() {
      DictValueApi.list({ dictCode: 'pms_sale_service' }).then(response => {
        this.options.saleServiceOptions = response.data
      })
      DictValueApi.list({ dictCode: 'pms_delivery_type' }).then(response => {
        this.options.deliveryTypeOptions = response.data
      })
      DictValueApi.list({ dictCode: 'pms_stock_status' }).then(response => {
        this.options.stockStatusOptions = response.data
      })
      DictValueApi.list({ dictCode: 'pms_sales_status' }).then(response => {
        this.options.salesStatusOptions = response.data
      })
    },
    handlePrev() {
      this.$emit('prevStep')
    },
    handleFinishCommit() {
      this.$emit('finishCommit', this.isEdit)
    }
  }
}
</script>

<style scoped>
.littleMarginLeft {
  margin-left: 10px;
}

.littleMarginTop {
  margin-top: 10px;
}

.paramInput {
  width: 250px;
}

.paramInputLabel {
  display: inline-block;
  width: 100px;
  text-align: right;
  padding-right: 10px
}

.cardBg {
  background: #F8F9FC;
}
</style>
